<template>
	<div class="count">
		<span class="control" v-if="food.count" @click="updateFoodCount(false)">-</span>
		<span v-if="food.count">{{food.count}}</span>
		<span class="control" @click="updateFoodCount(true)">+</span>			
	</div>
</template>

<script>
	export default {
		props:{
			food:Object
		},
		methods:{
			updateFoodCount(isAdd){
				this.$store.dispatch("updateFoodCount",{isAdd,food:this.food})
			}
		},	
		mounted(){
			
		}
	}
</script>

<style lang="scss" scoped>
@import "../scss/GLOBAL.scss";
.count {
	display: flex;
		span {
			margin: 0 3px;
		}
		.control {
			width: 15px;
			text-align: center;
			line-height: 15px;
			color: #fff;
			height: 15px;
			border-radius: 50px;
			background-color: $themeColor;
		}
	}
</style>